'use client'

import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const badgeVariants = cva('inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-medium', {  
  variants: {    
    variant: {      
      default: 'bg-primary text-primary-foreground',      
      outline: 'border border-input bg-transparent',      
      secondary: 'bg-secondary text-secondary-foreground'    },    
    size: {      
      sm: 'h-5',      
      md: 'h-6'    }  },  
  defaultVariants: {    
    variant: 'default',    
    size: 'sm'  }
})

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}

const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(({ className, variant, size, ...props }, ref) => (
  <span ref={ref} className={cn(badgeVariants({ variant, size, className }))} {...props} />
))
Badge.displayName = 'Badge'

export { Badge, badgeVariants }